<template>
  <el-dialog
   :visible.sync="visible"
   width="70%"
   :close-on-click-modal=false
   >
    <!-- 关闭选项 :before-close="handleClose" -->
    <!-- 编辑窗口 -->
    <edit-plan ref="editForm" v-if="editShow" v-bind:isUpdate="true" @submitOk="handleSubmitOk"></edit-plan>
    <!-- 纯展示窗口 -->
    <plan-detail ref="planDetail" v-if="detailShow"></plan-detail>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import editPlan from '../components/editPlan'
import PlanDetail from '../components/PlanDetail'
import { reqInfo } from '@api/plan.api.fetch'
export default {
  components: {
    editPlan,
    PlanDetail
  },
  data () {
    return {
      visible: false,
      editShow: false,
      detailShow: false,
      isEdit: false
    }
  },
  methods: {
    // 初始化数据
    init (id) {
      this.visible = true
      reqInfo({ planId: id }).then(res => {
        // 如果是编辑
        if (this.isEdit) {
          this.detailShow = false
          this.editShow = true
          this.$nextTick(() => {
            this.$refs['editForm'].init(res.data)
          })
        } else {
          // 只显示内容
          this.editShow = false
          this.detailShow = true
          this.$nextTick(() => {
            this.$refs['planDetail'].init(res.data)
          })
        }
      })
    },
    // 编辑时点击了提交
    handleSubmitOk () {
      this.editShow = false
      this.$refs['editForm'].reset()
      this.$message.success('ok')
      this.$emit('refresh')
      this.visible = false
    }
  }

}
</script>

<style>

</style>
